<template>
  <div>

    <a-table v-model="tableData" :table-config="definition" :selection="true" selectKey="id"
             @selectionChange="selectionChange">

    </a-table>

    <my-form ref="myForm" title="编辑客户" @getList="getList"/>
    <el-dialog
      top="1vh"
      :close-on-click-modal="false"
      append-to-body
      title="选择用户"
      :visible.sync="dialogVisible"
      width="30%">

      <el-select v-model="queryRequest.userId" placeholder="请选择用户">
        <el-option
          v-for="item in userIdList"
          :key="item.userId"
          :label="item.nickName"
          :value="item.userId">
        </el-option>
      </el-select>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="clickSubmit">确 定</el-button>
      </span>

    </el-dialog>

  </div>
</template>

<script>
import ATable from "@/components/FlyElement/aTable.vue";
import MyForm from './form.vue';
import {
  backAfter,
  backLoan,
  claimCustomer,
  distAfter,
  distCustomer,
  distLoan,
  followCustomer,
  followRemind,
  followRepayment,
  publicAfter,
  publicDist,
  publicLoan,
  selectUserList,
  stateToAfter,
  stateToLoan
} from "@/api/lion/customerInfo";


export default {
  name: 'MyTable',
  components: {ATable, MyForm},
  props: {
    tableData: {
      type: Array,
      required: true
    },
    type: {
      type: Number,
      required: true
    },
    selectIdList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogVisible: false,
      userIdList: [],
      callFun: '',
      definition: [
        {
          width: '60px',
          prop: 'id',
          label: 'id'
        },
        {
          width: '120px',
          prop: 'name',
          label: '姓名'
        },
        {
          width: '120px',
          prop: 'phoneNumber',
          label: '手机'
        },
        {
          width: '80px',
          prop: 'age',
          label: '年龄'
        },
        {
          width: '80px',
          prop: 'sex',
          label: '性别',
          formatter(data) {
            switch (data) {
              case 0:
                return '男'
              case 1:
                return '女'
            }
          }
        },
        {
          width: '100px',
          prop: 'occupation',
          label: '职业',
          dict: 'customer_occupation'
        },
        {
          width: '80px',
          prop: 'signingStatus',
          label: '状态',
          formatter(data) {
            switch (data) {
              case 0:
                return '未签约'
              case 1:
                return '已签约'
            }
          }
        },
        {
          width: '90px',
          prop: 'level',
          label: '星级',
          dict: 'customer_level'
        },
        {
          width: '180px',
          prop: 'remark',
          label: '备注',
          overflow: true
        },
        {
          width: '100px',
          prop: 'city',
          label: '城市'
        },
        {
          width: '80px',
          prop: 'amount',
          label: '贷款金额（万）'
        },
        {
          width: '200px',
          prop: 'houseJson',
          label: '房产情况',
          formatter(data) {
            const list = JSON.parse(data);
            let html = ''
            list.forEach(item => html += `房子:${item.cellName} 价格:${item.price}<br/>\r\n`)
            return html
          },
          overflow: true
        },
        {
          width: '200px',
          prop: 'carJson',
          label: '车辆情况',
          formatter(data) {
            const list = JSON.parse(data);
            let html = ''
            list.forEach(item => html += `品牌:${item.brand} 价格:${item.price}<br/>`)
            return html
          },
          overflow: true
        },
        {
          width: '200px',
          prop: 'insuranceJson',
          label: '保单',
          formatter(data) {
            const list = JSON.parse(data);
            let html = ''
            list.forEach(item => html += `公司:${item.company} 年缴:${item.amount}<br/>`)
            return html
          },
          overflow: true
        },
        {
          width: '150px',
          prop: 'createTime',
          label: '创建时间'
        },
        {
          prop: 'handleUser',
          label: '业务状态',
          formatter(data) {
            if (data === null || data === undefined) {
              return '未分配'
            }
            return '已分配'
          }
        },
        {
          prop: 'loanStatus',
          label: '放款状态',
          width: '120px',
          formatter(data) {
            switch (data) {
              case 0:
                return '未进入后期'
              case 1:
                return '已进入后期'
              case 2:
                return '待确认至后期'
            }
          }
        },
        {
          prop: 'afterSaleStatus',
          label: '售后状态',
          width: '120px',
          formatter(data) {
            switch (data) {
              case 0:
                return '未进入售后'
              case 1:
                return '已进入售后'
              case 2:
                return '待确认至售后'
              default:
                return '-'
            }
          }
        },
        {
          prop: 'handleUserString',
          label: '售前客服',
          width: '120px',
        },
        {
          prop: 'loanUserString',
          label: '后期客服',
          width: '120px',
        },
        {
          prop: 'afterUserString',
          label: '售后客服',
          width: '120px',
        },
        {
          width: 320,
          fixed: 'right',
          handle: [
            {
              template: 'update',
              handle: (data) => {
                this.$refs.myForm.open(2, data.id)
              }
            },
            {
              template: 'details',
              handle: (data) => {
                this.$refs.myForm.open(3, data.id)
              }
            },
            {
              icon: 'el-icon-phone-outline',
              text: '跟进客户',
              if: (data) => this.type === 2 && data.followCustomer === 0,
              handle: (data) => {
                this.followCustomer(data)
              }
            },
            {
              icon: 'el-icon-right',
              text: '转到后期',
              if: (data) => this.type === 2 && data.followCustomer === 99 && data.loanUser === null,
              handle: (data) => {
                this.stateToLoan(data)
              }
            },
            {
              icon: 'el-icon-phone-outline',
              text: '跟进客户',
              if: (data) => this.type === 3 && data.followCustomer === 2,
              handle: (data) => {
                this.followCustomer(data)
              }
            },
            {
              icon: 'el-icon-right',
              text: '转到售后',
              if: (data) => this.type === 3 && data.followCustomer === 99 && data.afterUser === null,
              handle: (data) => {
                this.stateToAfter(data)
              }
            },
            {
              icon: 'el-icon-phone-outline',
              text: '跟进客户',
              if: (data) => this.type === 4 && data.followCustomer === 4,
              handle: (data) => {
                this.followCustomer(data)
              }
            },
            {
              icon: 'el-icon-sunset',
              text: '跟进特殊日子',
              if: (data) => this.type === 4 && data.followRemind === 0,
              handle: (data) => {
                this.followRemind(data)
              }
            },
            {
              icon: 'el-icon-sunset',
              text: '跟进还款',
              if: (data) => this.type === 4 && data.followRepayment === 0,
              handle: (data) => {
                this.followRepayment(data)
              }
            },
            {
              icon: 'el-icon-right',
              text: '确认进入后期',
              if: () => this.type === 8,
              handle: (data) => {
                this.openSelectUserDialog(data, 'distLoan')
              }
            },
            {
              icon: 'el-icon-back',
              text: '打回',
              if: () => this.type === 8,
              handle: (data) => {
                this.backLoan(data)
              }
            },
            {
              icon: 'el-icon-right',
              text: '分配售后',
              if: () => this.type === 9,
              handle: (data) => {
                this.openSelectUserDialog(data, 'distAfter')
              }
            },
            {
              icon: 'el-icon-back',
              text: '打回',
              if: () => this.type === 9,
              handle: (data) => {
                this.backAfter(data)
              }
            },
          ]
        }

      ],
      queryRequest: {userId: undefined, ids:[]}
    }
  },
  methods: {

    getList() {
      this.$emit('getList')
    },

    // 选中数据
    selectionChange(selectData, selectKeys) {
      this.$emit("update:selectIdList", selectKeys)
    },
    //跟进客户
    followCustomer(data) {
      this.queryRequest.ids = [data.id]
      followCustomer(this.queryRequest).then(res => {
        this.getList()
      })
    },
    //跟进提醒
    followRemind(data) {
      this.queryRequest.ids = [data.id]
      followRemind(this.queryRequest).then(res => {
        this.getList()
      })
    },
    //跟进还款
    followRepayment(data) {
      this.queryRequest.ids = [data.id]
      followRepayment(this.queryRequest).then(res => {
        this.getList()
      })
    },
    //领取客户
    claimCustomer(data) {
      this.queryRequest.ids = [data.id]
      claimCustomer(this.queryRequest).then(res => {
        this.getList()
      })
    },
    //分配客户
    distCustomer(data) {
      this.queryRequest.ids = [data.id]
      distCustomer(this.queryRequest).then(res => {
        this.getList()
      })
    },
    //转售前公共池
    publicDist(data) {
      this.queryRequest.ids = [data.id]
      publicDist(this.queryRequest).then(res => {
        this.getList()
      })
    },
    //客户转后期
    stateToLoan(data) {
      this.queryRequest.ids = [data.id]
      stateToLoan(this.queryRequest).then(res => {
        this.getList()
      })
    },
    //分配后期
    distLoan() {
      distLoan(this.queryRequest).then(res => {
        this.getList()
      })
    },
    //后期打回
    backLoan(data) {
      this.queryRequest.ids = [data.id]
      backLoan(this.queryRequest).then(res => {
        this.getList()
      })
    },
    //后期转公共池
    publicLoan(data) {
      this.queryRequest.ids = [data.id]
      publicLoan(this.queryRequest).then(res => {
        this.getList()
      })
    },
    //客户转售后
    stateToAfter(data) {
      this.queryRequest.ids = [data.id]
      stateToAfter(this.queryRequest).then(res => {
        this.getList()
      })
    },
    //分配售后
    distAfter() {
      distAfter(this.queryRequest).then(res => {
        this.getList()
      })
    },
    //售后打回
    backAfter(data) {
      this.queryRequest.ids = [data.id]
      backAfter(this.queryRequest).then(res => {
        this.getList()
      })
    },
    //转售后公共池
    publicAfter(data) {
      this.queryRequest.ids = [data.id]
      publicAfter(this.queryRequest).then(res => {
        this.getList()
      })
    },

    /**
     * 打开用户选择页面
     */
    openSelectUserDialog(data, callFun) {
      this.queryRequest.ids = [data.id]
      this.callFun = callFun
      this.dialogVisible = true
      this.getUserList()
    },

    /**
     * 查询用户列表
     */
    getUserList() {
      selectUserList(this.type).then(response => {
        this.userIdList = response.data
      })
    },

    /**
     * 点击提交按钮
     */
    clickSubmit() {
      this.dialogVisible = false
      this[this.callFun]()
    }
  }
}
</script>

<style scoped>

</style>
